<template>
  <Dialog title="增加推广机构" :loading="loading" :visible="visible" button-text="保存" @close="handleClose" @confirm="handleConfirm">
    <el-form ref="ruleForm" :model="selectRow" :rules="rules" label-width="auto">
      <el-form-item label="编号：" prop="no">
        <el-input v-model="selectRow.no" />
      </el-form-item>
      <el-form-item label="类型：" prop="type">
        <el-input v-model="selectRow.type" />
      </el-form-item>
      <el-form-item label="名称：" prop="name">
        <el-input v-model="selectRow.name" />
      </el-form-item>
      <el-form-item label="管理员：" prop="manager">
        <el-input v-model="selectRow.manager" />
      </el-form-item>
      <el-form-item label="手机：" prop="phone">
        <el-input v-model="selectRow.phone" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="selectRow.password" />
      </el-form-item>
      <el-form-item label="医院id：" prop="hospitalId">
        <el-input v-model="selectRow.hospitalId" />
      </el-form-item>
      <el-form-item label="医院名字：" prop="hospitalName">
        <el-input v-model="selectRow.hospitalName" />
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script>
import Dialog from "@/components/Dialog";
export default {
  components: { Dialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectRow: {
      type: Object,
      default: () => ({}),
    },
  },
  data: function() {
    return {
      ruleForm: {},
      value: '',
      rules: {
        no: [
          { required: true, message: '请输入编号', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请输入类型', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        manager: [
          { required: true, message: '请输入管理员', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        hospitalId: [
          { required: true, message: '请输入医院id', trigger: 'blur' },
        ],
        hospitalName: [
          { required: true, message: '请输入医院名字', trigger: 'blur' },
        ],
      },
      loading: false,
    };
  },
  watch: {
    selectRow: {
      handler(val) {
        this.ruleForm = val;
      },
      deep: true,
    },
    visible: {
      handler(val) {
        if (val && !this.selectRow.id) this.ruleForm = { status: '启用' };
      },
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('update:selectRow', {});
      this.$refs.ruleForm.resetFields();
      this.ruleForm = {};
    },
    handleConfirm() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return;
        this.loading = true;
        if (this.selectRow.id) {
          this.$api[`/edit`](this.ruleForm).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.msgSuccess('修改推广机构成功');
            this.handleClose();
          }).finally(() => (this.loading = false));
        } else {
          this.$api[`/insert`](this.ruleForm).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.msgSuccess('增加推广机构成功');
            this.handleClose();
          }).finally(() => (this.loading = false));
        }
      });
    },
  },
};
</script>
